<template>
  <div class="login">


    <div class="account" v-if="!isPhoneLogin">


     <h2 class="login_logo">绿色优选</h2>

      
      <div class="login-content">
        <login-input
          v-for="(item, index) in accountData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="login-opreate">
        <a-button type="primary"  block shape="round" @click="login" class="login_submit">
          登录
        </a-button>
        <a-button  type="link"  @click="toggleLoginBox" class="login_submit">
          使用手机号注册/登录
        </a-button>
      </div>



    </div>

    <div class="phone" v-if="isPhoneLogin">
       <h2 class="login_logo">绿色优选</h2>

      <div class="login-content">
        <login-input
          v-for="(item, index) in phoneData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="login-opreate">
        <a-button type="primary"  block shape="round" @click="login"  class="login_submit">
          登录
        </a-button>
        <a-button type="link" @click="toggleLoginBox" class="login_submit">
          使用账号密码登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import LoginInput from "../components/LoginInput.vue";
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { LoginInput, TopHeader },
  name: "login",
  data() {
    return {
      VCode: "",
      accountData: {
        email: {
          label: "用户名/邮箱",
          val: "",
        },
        password: {
          label: "密码",
          val: "",
          type: "password",
        },
      },
      phoneData: {
        phoneNum: {
          label: "手机号码",
          val: "",
        },
        verificationCode: {
          label: "验证码",
          val: "",
          right: "点击获取验证码",
          toogle: this.getVerificationCode,
        },
      },
      isPhoneLogin: false,
    };
  },

  methods: {
    // 切换登录模式
    toggleLoginBox() {
      this.isPhoneLogin = !this.isPhoneLogin;
    },

    // 获取验证码
    getVerificationCode() {
      const self = this;
      this.$http.get("/api/getVerificationCode").then(
        (res) => {
          self.VCode = res.data.data.num;

          self.$success({
            title: "验证码",
            content: (
              <div>
                <p>{self.VCode}</p>
              </div>
            ),
          });
        },
        (error) => {
          self.$message.error(error);
        }
      );
    },

    // 登录按钮
    login() {
      const self = this;
      let promise = null;
      if (this.isPhoneLogin) {
        if (self.VCode == self.phoneData.verificationCode.val) {
          promise = this.$http.post("/login", {
            phone: self.phoneData.phoneNum.val,
          });
        } else {
          self.$message.error("输入有误");
        }
      } else {
        promise = this.$http.post("/login", {
          email: self.accountData.email.val,
          pwd: self.accountData.password.val,
        });
      }

      promise.then(
        (res) => {
         var token=res.data.token;
          var userInfo=res.data.data.userInfo;
          // self.$store.dispatch('setUserInfo',res.data.data.userInfo);
          self.$store.commit("setUserInfo",userInfo);
          self.$store.commit("setToken",token);
          self.$router.push('/home')
        },
        (error) => {
          self.$message.error(error);
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
 .login_logo{
          font-size:40px;
          font-weight: bold;
          color: #02a774;
          text-align: center;
 }
 .login_submit{
            display: block;
            width: 100%;
            height: 42px;
            margin-top: 30px;
            border-radius: 4px;
            background: #4cd96f;
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 42px;
            border: 0;
            }
.login {
  width: 100%;
  height: 100%;
  background-color: $app-bg-color;
  .account,
  .phone {
    height: 100%;
    .login-content {
      padding: $common-padding;
    }
    .login-opreate {
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
}
h2 {
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi {
  font-size: 20px;
  font-weight: bolder;
}
</style>
